<template>
	<view class="swiper-container">
		<!-- 滑动区域 -->
		<scroll-view scroll-x scroll-with-animation show-scrollbar="false" class="scroll-wrapper">
			<!-- 容纳所有卡片的宽大 view -->
			<view class="cards-container">
				<view class="left-padding"></view>
				<!-- 第一张卡片 -->
				<view class="card card-gold" @click="handleClick('1个月VIP', '3.9', '10')">
					<text class="card-title">1个月VIP</text>
					<view class="price-container">
						<text class="current-price">￥3.9</text>
						<text class="original-price">原价: ￥10</text>
					</view>
					<text class="limited-price">首月3.9元无限看</text>
				</view>
				<!-- 第二张卡片 -->
				<view class="card card-blue" @click="handleClick('3个月VIP', '19.9', '30')">
					<text class="card-title">3个月VIP</text>
					<view class="price-container">
						<text class="current-price">￥19.9</text>
						<text class="original-price">原价: ￥30</text>
					</view>
					<text class="limited-price">更划算的套餐选择</text>
				</view>
				<!-- 第三张卡片 -->
				<view class="card card-green" @click="handleClick('6个月VIP', '59')">
					<text class="card-title">6个月VIP</text>
					<view class="price-container">
						<text class="current-price">￥59</text>
					</view>
					<text class="limited-price">高性价比，超长享受</text>
				</view>
				<!-- 第四张卡片 -->
				<view class="card card-red" @click="handleClick('12个月VIP', '99', '120')">
					<text class="card-title">12个月VIP</text>
					<view class="price-container">
						<text class="current-price">￥99</text>
						<text class="original-price">原价: ￥120</text>
					</view>
					<text class="limited-price">全年无忧，最佳优惠</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		methods: {
			handleClick(videoName, price, oldPrice) {
				console.log(`VIP名称: ${videoName}, 新价格: ${price}, 原价: ${oldPrice}`);

				// 调用 Vuex mutation 更新 videoAbout
				this.$store.commit('setVideoAbout', {
					videoName,
					price,
					oldPrice
				});

				// 跳转到 pages/order/index 页面
				uni.navigateTo({
					url: '/pages/order/index'
				});
			}
		},
	};
</script>

<style>
	/* 外层滑动区域 */
	.swiper-container {
		width: 100%;
		height: 35vw;
		/* 容器高度 */
		overflow: hidden;
		background-color: #f9f9f9;
	}

	/* 滑动区域 */
	.scroll-wrapper {
		width: 100%;
		height: 100%;
	}

	/* 容纳所有卡片的宽大 view */
	.cards-container {
		display: flex;
		flex-direction: row;
		width: calc(70vw * 4 + 5vw * 3);
		/* 四张卡片宽度 + 间距 */
		height: 100%;
	}

	/* 卡片通用样式 */
	.card {
		width: 70vw;
		height: 30vw;
		margin-right: 5vw;
		border-radius: 15px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 2vw 3vw;
		box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
		/* 阴影效果 */
		transition: transform 0.2s ease-in-out;
	}

	/* 点击缩放效果 */
	.card:active {
		transform: scale(0.95);
	}

	/* 卡片颜色主题 */
	.card-gold {
		background: linear-gradient(135deg, #f9da9a, #f9e8bc);
	}

	.card-blue {
		background: linear-gradient(135deg, #d0f4f0, #ddf7eb);
	}

	.card-green {
		background: linear-gradient(135deg, #b3e5b4, #cde9cd);
	}

	.card-red {
		background: linear-gradient(135deg, #f8b2b2, #fbc8c8);
	}

	/* 标题样式 */
	.card-title {
		font-size: 4vw;
		color: #000000;
		font-weight: bold;
	}

	/* 价格区域 */
	.price-container {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	/* 当前价格 */
	.current-price {
		font-size: 4vw;
		color: #ff5722;
		font-weight: bold;
		margin-right: 3vw;
	}

	/* 原价，带删除线 */
	.original-price {
		font-size: 3vw;
		color: #888888;
		text-decoration: line-through;
	}

	/* 限时特价标签 */
	.limited-price {
		font-size: 3vw;
		color: #ff5722;
		font-weight: bold;
		margin-top: 1vw;
	}

	.left-padding {
		width: 10px;
	}
</style>